package me.yricky.cov_spectrum.ui.content

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.grid.*
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.selection.SelectionContainer
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
import me.yricky.cov_spectrum.R
import me.yricky.cov_spectrum.model.beans.CollectionItem
import me.yricky.cov_spectrum.model.utils.webPageUrl
import me.yricky.cov_spectrum.ui.openByWebView
import me.yricky.cov_spectrum.ui.theme.IconButton
import me.yricky.cov_spectrum.viewmodel.CountQueryViewModel

@Composable
fun CollectionItemPage(
    modifier: Modifier = Modifier,
    collectionItem: CollectionItem,
    state:LazyGridState = rememberLazyGridState(),
    queryViewModel: CountQueryViewModel

){
    LazyVerticalGrid(
        columns = GridCells.Adaptive(280.dp),
        modifier = modifier,
        state = state
    ){
        item(span = { GridItemSpan(maxLineSpan) }, contentType = "head") {
            SelectionContainer {
                Text(text = collectionItem.title, style = MaterialTheme.typography.h4)
            }
        }
        item(span = { GridItemSpan(maxLineSpan) }, contentType = "desc") {
            SelectionContainer {
                Text(text = collectionItem.description,Modifier.padding(8.dp,0.dp))
            }
        }
        items(collectionItem.variants){ item ->
            Surface(
                modifier = Modifier.padding(4.dp),
                shape = RoundedCornerShape(8.dp),
                color = MaterialTheme.colors.surface,
                elevation = 4.dp
            ) {
                var showDialog by remember {
                    mutableStateOf(false)
                }
                VariantItemContent(item = item, queryViewModel = queryViewModel){
                    showDialog = true
                }
                if(showDialog){
                    Dialog(onDismissRequest = { showDialog = false }) {
                        Surface(
                            shape = RoundedCornerShape(16.dp)
                        ) {
                            VariantItemDialogContent(Modifier.padding(16.dp),item = item)
                        }
                    }
                }
            }

        }
    }
}

@Composable
fun VariantItemContent(
    modifier: Modifier = Modifier,
    item:CollectionItem.VariantItem,
    queryViewModel: CountQueryViewModel,
    onClick:(CollectionItem.VariantItem)->Unit = {}
) = Box(modifier){
    Column(
        Modifier
            .fillMaxSize()
            .clickable { onClick(item) }
            .padding(4.dp)) {
        Text(text = item.name, style = MaterialTheme.typography.h5, maxLines = 1)
        Text(text = item.description, maxLines = 1, overflow = TextOverflow.Ellipsis)
        QueryLineChart(
            Modifier
                .padding(8.dp)
                .fillMaxWidth()
                .height(160.dp),
            queryCase = item.queryCase,
            queryViewModel = queryViewModel,
            name = item.name
        )
    }
    if(item.highlighted){
        val color = MaterialTheme.colors.primary
        Canvas(modifier = Modifier
            .align(Alignment.TopEnd)
            .padding(4.dp)
            .size(8.dp)){
            drawCircle(color)
        }
    }
}

@Composable
fun VariantItemDialogContent(
    modifier: Modifier = Modifier,
    item:CollectionItem.VariantItem,
) = Box(modifier){
    LazyColumn{
        item {
            Column(
                Modifier
                    .fillMaxSize()
                    .padding(0.dp,4.dp)) {
                Row {
                    Text(
                        text = item.name,
                        style = MaterialTheme.typography.h5,
                        modifier = Modifier.weight(1f)
                    )
                    val context = LocalContext.current
                    val colors = MaterialTheme.colors
                    IconButton(
                        modifier = Modifier.size(40.dp),
                        painter = painterResource(id = R.drawable.ic_round_open_in_new_24),
                    ) {
                        context.openByWebView(item.queryCase.webPageUrl.toString(),colors)
                    }
                }
                SelectionContainer {
                    Text(text = item.description, overflow = TextOverflow.Ellipsis)
                }
                Spacer(modifier = Modifier
                    .fillMaxWidth()
                    .height(1.dp)
                    .background(MaterialTheme.colors.onSurface))
            }
        }
        item.queryCase.apply {
            item {
                Column {
                    if (variantQuery != null){
                        Text(text = "variant query:")
                        Text(text = variantQuery)
                    }
                    if(pangoLineage != null){
                        Text(text = "pango lineage:")
                        Text(text = pangoLineage)
                    }
                    if(nextcladePangoLineage != null){
                        Text(text = "next clade pango lineage:")
                        Text(text = nextcladePangoLineage)
                    }
                }
            }
            if(aaMutations.isNotEmpty()){
                item{
                    Text(text = "aa mutations:")
                }
                items(aaMutations){
                    Text(text = it)
                }
            }
            if(nucMutations.isNotEmpty()){
                item{
                    Text(text = "nuc mutations:")
                }
                items(nucMutations){
                    Text(text = it)
                }
            }
            if(aaInsertions.isNotEmpty()){
                item{
                    Text(text = "aa insertions:")
                }
                items(aaInsertions){
                    Text(text = it)
                }
            }
            if(nucInsertions.isNotEmpty()){
                item{
                    Text(text = "nuc insertions:")
                }
                items(nucInsertions){
                    Text(text = it)
                }
            }
        }
    }

    if(item.highlighted){
        val color = MaterialTheme.colors.primary
        Canvas(modifier = Modifier
            .align(Alignment.TopEnd)
            .padding(4.dp)
            .size(8.dp)){
            drawCircle(color)
        }
    }
}